<template>
  <div class="Coupon">
    <Header title="我的卡券"></Header>
    <scroller :on-infinite="infinite">
      <div style="padding:38px 6px 0 6px">

        <div class="titles">天数券</div>
        <div v-for="(item,index) in MyCoupon" :key="index" v-if="item.type===3">
          <div class="Couponinfo" @click="selectCoupon?SCoupon(item):''"
               :style="{backgroundImage:item.type===3?'url('+require('../../assets/my_bg_coupon-1.png')+')':'url('+require('../../assets/my_bg_coupon.png')+')'}">
            <div style="flex: 5;padding-left: 20px">
              <!--<p style="margin-top: 22px">布克书店</p>-->
              <p style="font-size: 22px;margin-top: 30px">{{item.name}}</p>
              <p v-if="item.type===3">折扣券(仅限购买套餐)</p>
              <p v-if="item.type===2">折扣券(仅限购买套餐)</p>
              <p v-if="item.type===1">折扣券(仅限购买套餐)</p>
            </div>
            <div style="flex: 4;">
              <p style="margin-top: 38px;font-size:14px">满{{item.amount}}可用</p>
              <p>有效期：{{item.couponExpires.substring(0,10)}}</p>
            </div>
          </div>
        </div>

        <div class="titles">满减券</div>
        <div v-for="(item,index) in MyCoupon" :key="index" v-if="item.type===2">
          <div class="Couponinfo" @click="selectCoupon?SCoupon(item):''"
               :style="{backgroundImage:item.type===3?'url('+require('../../assets/my_bg_coupon-1.png')+')':'url('+require('../../assets/my_bg_coupon.png')+')'}">
            <div style="flex: 5;padding-left: 20px">
              <!--<p style="margin-top: 22px">布克书店</p>-->
              <p style="font-size: 22px;margin-top: 30px">{{item.name}}</p>
              <p v-if="item.type===3">折扣券(仅限购买套餐)</p>
              <p v-if="item.type===2">折扣券(仅限购买套餐)</p>
              <p v-if="item.type===1">折扣券(仅限购买套餐)</p>
            </div>
            <div style="flex: 4;">
              <p style="margin-top: 38px;font-size:14px">满{{item.amount}}可用</p>
              <p>有效期：{{item.couponExpires.substring(0,10)}}</p>
            </div>
          </div>
        </div>

        <div class="titles">折扣券</div>
        <div v-for="(item,index) in MyCoupon" :key="index" v-if="item.type===1">
          <div class="Couponinfo" @click="selectCoupon?SCoupon(item):''"
               :style="{backgroundImage:item.type===3?'url('+require('../../assets/my_bg_coupon-1.png')+')':'url('+require('../../assets/my_bg_coupon.png')+')'}">
            <div style="flex: 5;padding-left: 20px">
              <!--<p style="margin-top: 22px">布克书店</p>-->
              <p style="font-size: 22px;margin-top: 30px">{{item.name}}</p>
              <p v-if="item.type===3">折扣券(仅限购买套餐)</p>
              <p v-if="item.type===2">折扣券(仅限购买套餐)</p>
              <p v-if="item.type===1">折扣券(仅限购买套餐)</p>
            </div>
            <div style="flex: 4;">
              <p style="margin-top: 38px;font-size:14px">满{{item.amount}}可用</p>
              <p>有效期：{{item.couponExpires.substring(0,10)}}</p>
            </div>
          </div>
        </div>
      </div>
    </scroller>
  </div>
</template>

<script>
  import Header from './../Header'
  import {mapState} from 'vuex'
  import {MyCoupon} from '../../api/mine'
  import first from '../../assets/my_bg_coupon.png'
  import second from '../../assets/my_bg_coupon-1.png'

  export default {
    name: 'Coupon',
    data () {
      return {
        first: first,
        second: second,
        selectCoupon: false,
        MyCoupon: []
      }
    },
    created () {
      if (this.$route.query.couponList) {
        this.selectCoupon = true
        this.MyCoupon = JSON.parse(this.$route.query.couponList)
      } else {
        MyCoupon().then(res => {
          this.MyCoupon = res.data.data
        })
      }
    },
    methods: {
      infinite (done) {
        setTimeout(() => {
          done(true)
        }, 1500)
      },
      SCoupon (item) {
        this.$store.dispatch('SELECT_COUPON', {
          selectCoupon: item
        })
        this.$router.go(-1)
      }
    },
    computed: {},
    components: {
      Header
    },
  }
</script>

<style lang='less' type="text/less">
  .Coupon {
    .titles {
      font-size: 16px;
      padding: 12px;
      font-weight: 600;
      color: @font-color;
    }
    .Couponinfo {
      height: 120px;
      width: 100%;
      background-repeat: no-repeat;
      background-size: 100% 120px;
      display: flex;
      color: #fff;
      font-size: 12px;
      /*background-image: url('../../assets/my_bg_coupon.png')*/
    }
  }
</style>
